import React, { useContext, ReactNode } from 'react'
import classNames from 'classnames'
import { MenuContext, IMenuContext } from './menu'
export interface MenuItemProps {
  readonly index?: string // index 是为了标识每一个菜单项
  disabled?: boolean
  className?: string
  style?: React.CSSProperties // ****
  children?: ReactNode
}

export const MenuItem = ({ index, disabled, className, style, children }: MenuItemProps) => {
  const context = useContext(MenuContext) as IMenuContext
  const classes = classNames('menu-item', className, {
    'is-disabled': disabled,
    'is-active': context.index === index // 判断当前菜单项是否被选中
  })

  return (
    <li className={classes} style={style} onClick={() => !disabled && context.onSelect(index as string)}>
      {children}
    </li>
  )
}
MenuItem.displayName = 'MenuItem'
export default MenuItem
